<template>
  <div class="target-wrapper" :style="position">
    <img class="target-icon" :src="targetImg" />
  </div>
</template>

<script setup lang="ts">
import targetImg from '@/assets/target.png';

import { usePosition } from '@/hooks/usePosition';
import { cssWidthHeight } from '@/constants';
interface Props {
  x: number;
  y: number;
}

const props = defineProps<Props>();

const { position } = usePosition(props);
</script>
<style lang="scss" scoped>
.target-wrapper {
  position: absolute;
  .target-icon {
    width: v-bind(cssWidthHeight);
    height: v-bind(cssWidthHeight);
  }
}
</style>
